<template>
	<view class="container">
		<view class="topHeader">
			<view class="boxTop">
				<view class="statusText" :class='type==1?"active":""' @tap="typeClick('1')">设计师</view>
				<view class="statusText" :class='type==2?"active":""' @tap="typeClick('2')">设计公司</view>
			</view>
		</view>

		<view class="contentNoBg">
			<view class="list">
				<view v-for="item in list" :key="index" @tap="selectItem(item)">
					<DesignOrCorpItem :item="item" :text='"change"' :type='type' :id="id" :design_id="design_id"
						:corp_id="corp_id"></DesignOrCorpItem>
				</view>
				<view class="uni-loadmore" v-if="showLoadMore">
					{{loadMoreText}} <!-- 加载更多的提示文本 -->
				</view>
			</view>
		</view>
		<view class="footer" @tap="selectInfo">
			确定
		</view>
	</view>
</template>

<script setup>
	import DesignOrCorpItem from '@/components/designOrCorpItem.vue'
	import {
		onLoad,
		onUnload,
		onPullDownRefresh,
		onReachBottom
	} from '@dcloudio/uni-app';
	import {
		designItem,
		cropItem
	} from '@/api/require.js'
	import {
		ref
	} from 'vue'


	const DesignOrCorpItemRef = ref('')

	// 创建响应式数据  
	const bgColor = ref('rgba(225,225,225,0)');
	const bg = ref(0)
	const type = ref('1')
	const typeClick = (code) => {
		// id.value = ''
		// items.value = ''
		type.value = code
		params.value.page = 1
		initData()
	}
	const params = ref({
		demand_id: '',
		city_code: '',
		province_code: '',
		page: 1,
		page_size: 10
	})

	const detailsId = ref('') //详情id

	// const design_id = ref('')
	// const corp_id = ref('')

	onLoad((option) => {
		params.value.city_code = option.city_code
		params.value.province_code = option.province_code

		id.value = option.design_id;
		console.log('optionoption', option)


		if (option.id) {
			params.value.demand_id = option.id;
		}
		// 设计师  设计公司
		if (option.selectType &&
			option.selectType !== "undefined") {
			type.value = option.selectType;
			console.log('选择的是设计师还是企业', option, type.value)
		}
		if (!option.selectType || option.selectType == "undefined") {
			type.value = 1
			id.value = ''
			console.log('没有设计师还是企业', option, type.value)
		}

		initData()

	})
	const loadMoreText = ref("加载中...") // 加载更多时的提示文本
	// 控制是否显示加载更多提示
	const showLoadMore = ref(false)
	const max = ref(0)
	const list = ref([])
	// 页面卸载时重置相关状态
	onUnload(() => {
		list.value = []
		max.value = 0
		loadMoreText.value = "加载更多";
		showLoadMore.value = false


	})
	// 当页面滚动到底部时触发加载更多数据
	onReachBottom(() => {

		console.log("onReachBottom", params.value.page * params.value.page_size, max.value);
		// 如果数据总条数>当前得页数，则不再加载更多，显示提示
		if (params.value.page * params.value.page_size > max.value) {
			loadMoreText.value = "没有更多数据了!";
			return;

		}
		params.value.page++
		// 显示加载中提示
		showLoadMore.value = true;
		setTimeout(() => {
			setListData()
		}, 300)

	})
	// 用户下拉刷新时触发，重新初始化数据
	onPullDownRefresh(() => {
		params.value.page = 1
		initData()
	})

	const initData = async () => {
		max.value = 0; // 重置 max
		list.value = []; // 清空原有数据
		setListData()
	}
	const setListData = () => {

		if (type.value == 1) {
			getDesign()
		} else {
			getCorp()
		}
	}
	const getDesign = async () => {
		const res = await designItem(params.value)
		list.value = list.value.concat(res.data.list); // 合并数据到列表中
		uni.stopPullDownRefresh(); // 停止下拉刷新的动画
		max.value = res.data.total
	}
	const getCorp = async () => {
		const res = await cropItem(params.value)
		list.value = list.value.concat(res.data.list); // 合并数据到列表中
		uni.stopPullDownRefresh(); // 停止下拉刷新的动画
		max.value = res.data.total
	}

	const id = ref('')
	const items = ref('')
	const selectItem = (item) => {
		id.value = item.id
		items.value = item
	}

	const selectInfo = () => {
		if (items.value) {
			uni.setStorageSync('designCorp', {
				...items.value,
				selectType: type.value
			})
		}

		if (params.value.demand_id) {
			uni.navigateBack()

		} else {

			uni.switchTab({
				url: '/pages/require/index'
			})
		}

	}
</script>


<style lang="less" scoped>
	.container {
		background: #F2F2F2;
		height: 100%;
		display: flex;
		flex-direction: column;
		flex: 1;
	}

	.topHeader {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 999;
		background-color: #fff;
		height: 136rpx;

		.boxTop {
			width: calc(100% - 60rpx);
			padding-left: 6rpx;
			padding-right: 6rpx;
			display: flex;
			height: 76rpx;
			justify-content: space-between;
			align-items: center;
			flex-direction: row;
			background: #EBEBEB;
			margin: 36rpx auto 24rpx;
			border-radius: 10rpx 10rpx 10rpx 10rpx;
		}

		.statusText {
			height: 64rpx;
			line-height: 64rpx;
			text-align: center;
			width: calc(50% - 6rpx);
			font-weight: 500;
			font-size: 30rpx;
			color: #666;
		}

		.active {
			height: 64rpx;
			width: calc(50% - 6rpx);
			line-height: 64rpx;
			text-align: center;
			background: #FFFFFF;
			border-radius: 10rpx 10rpx 10rpx 10rpx;
			font-weight: 500;
			font-size: 30rpx;
			color: #D5A969;
		}
	}

	.contentNoBg {
		padding: 20rpx 30rpx;
		margin-top: 136rpx;
		height: calc(100vh - 136rpx - 160rpx);
		padding-bottom: 120rpx;

		.list {
			padding-bottom: 120rpx;

		}
	}

	.uni-loadmore {
		text-align: center;
		font-size: 24rpx;
		color: #666;
	}

	.footer {
		position: fixed;
		bottom: 20rpx;
		left: 0;
		font-weight: 500;
		font-size: 34rpx;
		color: #FFFFFF;
		line-height: 88rpx;
		margin-left: 30rpx;
		text-align: center;
		height: 88rpx;
		width: calc(100% - 60rpx);
		background: linear-gradient(115deg, #F2BD6F 0%, #CCA05F 100%);
		border-radius: 20rpx 20rpx 20rpx 20rpx;
	}
</style>